<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>拍卖品发布</title>
    <link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">
    <style>
        .error-message {
            color: red;
            font-size: 12px;
            margin-left: 10px;
            display: none;
        }
    </style>
</head>

<body>
<div class="wrap">
    <!-- main begin-->
    <div class="sale">
        <h1 class="lf">在线拍卖系统</h1>
        <div class="logout right"><a href="#" title="注销">注销</a></div>
    </div>
    <div class="login logns produce">
        <h1 class="blues">拍卖品信息</h1>
        <form action="/auction/do/save" name="releaseFrom" id="auctionForm" method="post"
              enctype="multipart/form-data">
            <dl>
                <input type="hidden" name="auctionId" value="${auctionById.auctionId}"/>
                <dd>
                    <label>名称：</label>
                    <input type="text" class="inputh lf" placeholder="请输入拍卖品名称" name="auctionName" required
                           value="${auctionById.auctionName}"/>
                    <span class="error-message" id="nameError">名称不能为空</span>
                </dd>
                <dd>
                    <label>起拍价：</label>
                    <input type="text" class="inputh lf" placeholder="0.00" name="auctionStartPrice" required
                           value="${auctionById.auctionStartPrice}"/>
                    <span class="error-message" id="startPriceError">请输入有效的数字(如：1000.00)</span>
                </dd>
                <dd>
                    <label>底价：</label>
                    <input type="text" class="inputh lf" placeholder="0.00" name="auctionUpset" required
                           value="${auctionById.auctionUpset}"/>
                    <span class="error-message" id="upsetError">请输入有效的数字(如：1500.00)</span>
                </dd>
                <dd>
                    <label>开始时间：</label>
                    <input type="datetime-local" class="inputh lf" name="auctionStartTime" required
                           value="${auctionById.auctionStartTime}"/>
                    <span class="error-message" id="startTimeError">请选择开始时间</span>
                </dd>
                <dd>
                    <label>结束时间：</label>
                    <input type="datetime-local" class="inputh lf" name="auctionEndTime" required
                           value="${auctionById.auctionEndTime}"/>
                    <span class="error-message" id="endTimeError">请选择结束时间且必须晚于开始时间</span>
                </dd>
                <dd class="dds">
                    <label>描述：</label>
                    <textarea name="auctionDesc" cols="50" rows="5" class="textarea"
                              required>${auctionById.auctionDesc}</textarea>
                    <span class="error-message" id="descError">描述内容不能少于5个字</span>
                </dd>
                <dd>
                    <label>拍卖品图片：</label>
                    <div class="lf salebd">
                        <img id="preview" src="${auctionById.auctionPic}" alt="图片预览" width="100"
                             style="display:block;">
                    </div>
                    <input type="file" id="imageInput" name="image" accept="image/*" class="marg10" required>
                    <span class="error-message" id="imageError">请上传有效的图片文件(JPG/PNG)</span>
                </dd>
                <dd class="hegas">
                    <button type="submit" class="spbg buttombg buttombgs f14 lf buttomb">保 存</button>
                    <button type="button"
                            class="spbg buttombg buttombgs f14 lf buttomb"
                            onclick="window.history.back()">
                        取 消
                    </button>
                </dd>
            </dl>
        </form>
    </div>
</div>

<script>
    // 图片预览功能
    document.getElementById('imageInput').addEventListener('change', function (e) {
        const file = e.target.files[0];
        const preview = document.getElementById('preview');
        const errorSpan = document.getElementById('imageError');

        if (file) {
            // 验证图片类型
            const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
            if (!validTypes.includes(file.type)) {
                errorSpan.style.display = 'inline';
                return;
            } else {
                errorSpan.style.display = 'none';
            }

            const reader = new FileReader();
            reader.onload = function (event) {
                preview.src = event.target.result;
            };
            reader.readAsDataURL(file);
        }
    });

    // 表单验证
    document.getElementById('auctionForm').addEventListener('submit', function (e) {
        let isValid = true;

        // 验证名称
        const nameInput = document.querySelector('input[name="auctionName"]');
        if (nameInput.value.trim().length < 2) {
            document.getElementById('nameError').style.display = 'inline';
            isValid = false;
        } else {
            document.getElementById('nameError').style.display = 'none';
        }

        // 验证起拍价
        const startPriceInput = document.querySelector('input[name="auctionStartPrice"]');
        if (!/^\d+(\.\d{1,2})?$/.test(startPriceInput.value) || parseFloat(startPriceInput.value) <= 0) {
            document.getElementById('startPriceError').style.display = 'inline';
            isValid = false;
        } else {
            document.getElementById('startPriceError').style.display = 'none';
        }

        // 验证底价
        const upsetInput = document.querySelector('input[name="auctionUpset"]');
        if (!/^\d+(\.\d{1,2})?$/.test(upsetInput.value) || parseFloat(upsetInput.value) <= 0) {
            document.getElementById('upsetError').style.display = 'inline';
            isValid = false;
        } else {
            document.getElementById('upsetError').style.display = 'none';
        }

        // 验证时间
        const startTime = new Date(document.querySelector('input[name="auctionStartTime"]').value);
        const endTime = new Date(document.querySelector('input[name="auctionEndTime"]').value);
        if (isNaN(startTime.getTime())) {
            document.getElementById('startTimeError').style.display = 'inline';
            isValid = false;
        } else {
            document.getElementById('startTimeError').style.display = 'none';
        }

        if (isNaN(endTime.getTime()) || endTime <= startTime) {
            document.getElementById('endTimeError').style.display = 'inline';
            isValid = false;
        } else {
            document.getElementById('endTimeError').style.display = 'none';
        }

        // 验证描述
        const descTextarea = document.querySelector('textarea[name="auctionDesc"]');
        if (descTextarea.value.trim().length < 5) {
            document.getElementById('descError').style.display = 'inline';
            isValid = false;
        } else {
            document.getElementById('descError').style.display = 'none';
        }

        // 验证图片
        const imageInput = document.getElementById('imageInput');
        if (imageInput.files.length === 0) {
            document.getElementById('imageError').style.display = 'inline';
            isValid = false;
        } else {
            document.getElementById('imageError').style.display = 'none';
        }

        if (!isValid) {
            e.preventDefault();
        }
    });
</script>
</body>
</html>